<!-- 组件说明 -->
<template>
  <div class="launchSwiper">
    <van-swipe class="my-swipe" :loop="false" indicator-color="white">
      <van-swipe-item
        v-for="(item, index) in arrary"
        :key="index"
        class="swipeIndex"
      >
        <img class="imgcenter" :src="item.imgsrc" alt="" />
        <div class="txtwrap">
          <span>{{ item.text }}</span>
          <p
            v-if="index == arrary.length - 1"
            class="btn"
            @click.stop="gotoIndex"
          >
            Enjoy
          </p>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
// import base from '@/api/base'; // 导入接口域名列表
export default {
  name: "launchSwiper",
  components: {},
  props: {
    imgcodeurl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      arrary: [
        {
          imgsrc: require("@/assets/imgNews/launchSwiper/1.png"),
          text:
            "New way of playing, lying can earn income, walking can earn money",
          textCn: "新玩法，躺赚收益 走路竟然能挣钱"
        },
        {
          imgsrc: require("@/assets/imgNews/launchSwiper/2.png"),
          text:
            "More exercise, improve the body's immune ability, more wonderful life",
          textCn: "多运动，锻炼身体 生命不息，运动不止"
        },
        {
          imgsrc: require("@/assets/imgNews/launchSwiper/3.png"),
          text:
            "Love sharing, double happiness, more than one way of communication",
          textCn: "爱分享，快乐加倍 交流不止一种方式"
        }
      ]
    };
  },
  computed: {
    base: function() {
      return base;
    }
  },
  methods: {
    gotoIndex() {
      this.$emit("gotoIndex");
    }
  },
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less">
.launchSwiper {
  .my-swipe {
    .van-swipe__indicators {
      //bottom: 25.66%;
      bottom: 3.9rem;
    }
  }
  .van-swipe__indicator--active {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: -3px;
      top: -3px;
      width: calc(100% + 5px);
      height: calc(100% + 5px);
      background-color: transparent;
      border: 1px solid #fff;
      border-radius: 50%;
    }
  }
  .van-swipe__indicator:not(:last-child) {
    margin-right: 20px;
  }
}
</style>
<style lang="less" scoped>
.launchSwiper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, #00b1ff 0%, #0089ff 100%);
  opacity: 1;
  .my-swipe {
    width: 100%;
    height: 100%;
    .swipeIndex {
      .imgcenter {
        height: 4rem;
        width: 100%;
        object-fit: contain;
        object-position: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .txtwrap {
        height: 3rem;
        width: 6rem;
        padding: 0.3rem 0;
        box-sizing: border-box;
        border-radius: 0.3rem;
        overflow: hidden;
        //background-color: #fff;
        //font-size: 0.48rem;
        font-size: 0.3rem;

        font-weight: bold;
        line-height: 0.6rem;
        color: #fff;
        opacity: 1;
        position: absolute;
        left: 50%;
        bottom: 3.29%;
        transform: translate(-50%, 0);
        span {
          display: block;
          width: 100%;
          text-align: center;
          word-break: break-word;
        }
        .btn {
          width: 3.6rem;
          height: 0.8rem;
          line-height: 0.8rem;
          background: #fff;
          //background: linear-gradient(
          //  270deg,
          //  #00e2ff 0%,
          //  #0089ff 5%,
          //  #00e2ff 50%,
          //  #0089ff 95% #00e2ff 100%
          //);
          opacity: 1;
          border-radius: 0.46rem;
          font-size: 0.48rem;

          font-weight: bold;
          color: rgba(0, 147, 255, 1);
          text-align: center;
          margin: 0.33rem auto 0;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
